<template>
	<div>
		<div id="app" class="wrapper wrapper-content">
			<div class="row">
				<div>
					<div class="panel panel-primary">
						<div class="panel-body" style="padding: 0px 120px; box-sizing: border-box;">
							<el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading" :disabled="formReadOnly">
								<div style="text-align:center">
									<h3 style="font-weight: bold;color: black;font-size:24px">固定资产归还</h3>
								</div>
								<table style="margin:0 auto;width:80%;margin-top:20px;border-collapse: collapse;margin-bottom:20px">
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											基本信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请人</td>
										<td class="width-30">
											<el-form-item prop="applyuser.id">
												<user-select :limit='1' :value="inputForm.applyuser.id"
													@getValue='(value) => {inputForm.applyuser.id=value}' disabled>
												</user-select>
											</el-form-item>
										</td>
										<td class="width-15">所属公司</td>
										<td class="width-30">
											<el-form-item prop="company.id">
												<SelectTree ref="company" :props="{
													value: 'id',             // ID字段名
													label: 'name',         // 显示名称
													children: 'children'    // 子级字段名
												  }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.company.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.company.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请时间</td>
										<td class="width-30">
											<el-form-item prop="applytime">
												<el-date-picker v-model="inputForm.applytime" type="datetime" disabled
													style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"
													:clearable="false" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15">所属部门</td>
										<td class="width-30">
											<el-form-item prop="depart.id">
												<SelectTree ref="depart" :props="{
													value: 'id',             // ID字段名
													label: 'name',         // 显示名称
													children: 'children'    // 子级字段名
												  }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.depart.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.depart.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr style="height: 80px;line-height: 80px"
										v-if="inputForm.iscar==0&&inputForm.iscar!=''">
										<td class="width-15 active" style="line-height: 80px"><span
												style="color: red">*&nbsp;</span>备注
										</td>
										<td colspan="4" style="padding:0 10px">
											<el-form-item label="" prop="remarks" :rules="[]">
												<el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											固定资产归还信息
										</td>
									</tr>
									<tr>
										<td colspan="4" class="addDelImg">
											<i v-if="this.showButton" id="add" @click="add"
												class="el-icon-circle-plus"></i>
											<i v-if="this.showButton&&inputForm.remandListList.length>0" id="sub" @click="delAll"
												class="el-icon-remove"></i>
										</td>
									</tr>
									<td colspan="4" class="elTable">
										<div style="width:100%">
											<el-table :data="inputForm.remandListList" size="small" row-key="id"
												style="border-collapse:collapse;" :cell-style="cellStyle_attached"
												ref="mytables" :row-class-name="tableRowClassName"
												:header-cell-class-name="cellHeadStyle_attached"
												:tree-props="{ children: 'children', hasChildren: 'hasChildren'}">
												<el-table-column type="selection" width="50" align="center">
												</el-table-column>
												<el-table-column prop="fixed.id" header-align="center"
													align="center" show-overflow-tooltip label="固定资产">
													<template slot="header">
														<span style="color: red">*&nbsp;</span>
														<span>固定资产</span>
													</template>
													<template slot-scope="scope">
														<GridSelect
														  title="选择固定资产"
														  labelName = 'assetsName'
														  labelValue = 'id'
														  :value = "scope.row.fixed.id"
														  :limit="1"
														  @getValue='(value) => {scope.row.fixed.id=value}'
														  :columns="[
														  {
														    prop: 'id',
														    label: '主键'
														  },
														  {
														    prop: 'assetsName',
														    label: '资产名称'
														  }
														  ]"
														  :searchs="[
														  {
														    prop: 'assetsName',
														    label: '资产名称'
														  }
														  ]"
														  :dataListUrl="'/dlyrl/oa/fixedassets/fixedAssets/findRemand?userId='+userId"
														  entityBeanName="fixedAssets"
														  :queryEntityUrl="'/dlyrl/oa/fixedassets/fixedAssets/findRemand?userId='+userId">
														</GridSelect>
													</template>
												</el-table-column>
												<el-table-column prop="specificate" header-align="center"
													align="center" show-overflow-tooltip label="规格型号">
													<template slot="header">
														<span style="color: red">*&nbsp;</span>
														<span>规格型号</span>
													</template>
													<template slot-scope="scope">
														<el-input v-model="scope.row.specificate" placeholder="请填写规格型号"></el-input>
													</template>
												</el-table-column>
												<el-table-column prop="unit" header-align="center"
													align="center" show-overflow-tooltip label="计量单位">
													<template slot="header">
														<span style="color: red">*&nbsp;</span>
														<span>计量单位</span>
													</template>
													<template slot-scope="scope">
														<el-input v-model="scope.row.unit" placeholder="请填写计量单位"></el-input>
													</template>
												</el-table-column>
												<el-table-column prop="remarks" header-align="center"
													align="center" show-overflow-tooltip label="备注">
													<template slot="header">
														<span>备注</span>
													</template>
													<template slot-scope="scope">
														<el-input type="text" v-model="scope.row.remarks" placeholder="请填写备注信息"></el-input>
													</template>
												</el-table-column>
											</el-table>	
										</div>
									</td>
								</table>
							</el-form>
						</div>
					</div>
				</div>
			</div>	
		</div>				
		<!-- <el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading" :disabled="formReadOnly"
			label-width="120px">
				<el-col :span="24">
					<el-form-item label-width="0">
						<el-tabs v-model="fixedRemandTab">
							<el-tab-pane label="固定资产归还附表">
								<el-button size="small" @click="addRemandListRow" type="primary">新增</el-button>
								<el-table size="small" class="table"
									:data="inputForm.remandListList.filter(function(item){ return item.delFlag !== '1'})"
									style="width: 100%">
									<el-table-column prop="fixed.assetsName" header-align="center" align="center"
										show-overflow-tooltip label="固定资产">
									</el-table-column>
									<el-table-column prop="specificate" header-align="center" align="center"
										show-overflow-tooltip label="规格型号">
									</el-table-column>
									<el-table-column prop="unit" header-align="center" align="center"
										show-overflow-tooltip label="计量单位">
									</el-table-column>
									<el-table-column prop="remarks" header-align="center" align="center"
										show-overflow-tooltip label="备注信息">
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="150">
										<template slot-scope="scope">
											<el-button @click="viewRemandListRow(scope.row)" type="text" size="small">查看
											</el-button>
											<el-button @click="editRemandListRow(scope.row)" type="text" size="small">编辑
											</el-button>
											<el-button @click="delRemandListRow(scope.row)" type="text" size="small">删除
											</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-tab-pane>
						</el-tabs>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form> -->
		<RemandListForm ref="remandListForm" @addRow="saveRemandListRow(arguments)"></RemandListForm>
		
	</div>
</template>

<script>
	import tableStyles from '../../../../../utils/mixins.js'
	import GridSelect from '@/components/gridSelect'
	import RemandListForm from './RemandListForm'
	import UserSelect from '@/components/userSelect'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				userId:this.$store.state.user.id,
				title: '',
				method: '',
				loading: false,
				fixedRemandTab: '0',
				inputForm: {
					id: '',
					remandListList: [{
						fixed: {
						  id: ''
						},
						specificate: '',
						unit: '',
						remarks: ''
					}],
					applyuser: {
						id: ''
					},
					company: {
						id: ''
					},
					applydate: '',
					depart: {
						id: ''
					},
					remarks: ''
				},
				showButton: true, //按钮显示与否
			}
		},
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			}
		},
		components: {
			UserSelect,
			SelectTree,
			RemandListForm,
			GridSelect
		},
		watch: {
			'businessId': {
				handler(newVal) {
					if (this.$store.state.user.id != '') {
						var users = this.$store.state.user
					} else {
						var users = JSON.parse(sessionStorage.getItem("userInfo"));
					}
					if (this.businessId) {
						this.init(this.businessId)
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields()
							this.inputForm.applyuser.id = users.id;
							this.inputForm.company.id = users.company.id;
							this.inputForm.depart.id = users.office.id;
							this.inputForm.applytime = this.getNowTime();
						})
					}
				},
				immediate: true,
				deep: false
			}
		},
		methods: {
			init(id) {
				if (id) {
					this.fixedRemandTab = '0'
					this.inputForm.remandListList = []
					this.loading = true
					this.inputForm.id = id
					this.$nextTick(() => {
						this.$refs.inputForm.resetFields()
						this.$http({
							url: `/dlyrl/oa/fixedremand/fixedRemand/queryById?id=${this.inputForm.id}`,
							method: 'get'
						}).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data.fixedRemand)
							this.loading = false
						})
					})
				}
			},
			//添加
			add() {
				let i = this.inputForm.remandListList.length
				if ((i == 0) || (this.inputForm.remandListList[i - 1].fixed.id != '' || this.inputForm.remandListList[i - 1].specificate != '' || this.inputForm.scrappedListList[i-1].unit!=''|| this.inputForm.scrappedListList[i-1].remarks!='')
				) {
					let addTable = {
						fixed: {
						  id: ''
						},
						specificate: '',
						unit: '',
						remarks: ''
					}
					this.inputForm.remandListList.push(addTable)
				} else {
					this.$message.warning('请先填写当前已有空白行数据');
				}
			},
			//删除
			delAll() {
				for (var i = this.$refs.mytables.selection.length - 1; i >= 0; i--) {
					this.inputForm.remandListList.splice(this.$refs.mytables.selection[i].index, 1)
				}
			},
			saveRemandListRow(child) {
				if (child[0] === '') {
					this.inputForm.remandListList.push(child[1])
				} else {
					this.inputForm.remandListList.forEach((item, index) => {
						if (item === child[0]) {
							this.inputForm.remandListList.splice(index, 1, child[1])
						}
					})
				}
			},
			addRemandListRow(child) {
				this.$refs.remandListForm.init('add')
			},
			viewRemandListRow(child) {
				this.$refs.remandListForm.init('view', child)
			},
			editRemandListRow(child) {
				this.$refs.remandListForm.init('edit', child)
			},
			delRemandListRow(child) {
				this.inputForm.remandListList.forEach((item, index) => {
					if (item === child && item.id === '') {
						this.inputForm.remandListList.splice(index, 1)
					} else if (item === child) {
						item.delFlag = '1'
						this.inputForm.remandListList.splice(index, 1, item)
					}
				})
			},
			// 表单提交
			saveForm(callback) {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						this.$http({
							url: `/dlyrl/oa/fixedremand/fixedRemand/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							if (data && data.success) {
								callback(data.businessTable, data.businessId)
							}
						})
					}
				})
			}
		}
	}
</script>
